<template>
    <div>
        <headerSearch title="活动列表" :searchBack="true" @done="gotobtn"></headerSearch>
         <!-- 搜索框 -->
        <rearchKey :search_intop="search_intop" :searchISshow="searchISshow" v-on:spot="spot" :clearShow="clearShow" @clearClick="clearClick" @searchCancel="searchCancel"></rearchKey>
        <div class="pagecontent main-activity" style="background-color: #fff;">
          <!-- 活动列表 -->
          <div class="active_list" style="padding-top: 0.2rem;">
            <div class="active_item">
              <ul>
                <li v-for="(activeitem, act) in actives" :key="act"  @click="activitydetailClick(activeitem.id)">
                  <a class="clear">
                      <span class="active_list_img">
                        <img src="../common/images/cindex_19.jpg" v-if="activeitem.img == null">
                        <img :src="activeitem.img" alt="" v-else>
                      </span>
                    <p class="active_text"><em class="cur">热门</em>{{activeitem.title}}</p>
                    <p class="active_text">开始时间：{{activeitem.begin_time}}</p>
                    <p class="active_text"><span><sub>￥</sub><strong>{{activeitem.price}}</strong>起</span></p>
                    <!-- <span>{{activeitem.apply_num}}</span> -->
                  </a>
                </li>
              </ul>
            </div>
            <infinite-loading :on-infinite="onInfinite" ref="infiniteLoading">
                <span slot="no-more" class="contentEmpty">
                    <template v-if="actives.length">
                        (ฅ>ω<*ฅ)我们是有底线的(ฅ>ω<*ฅ)
                    </template>
                    <template v-if="!actives.length">
                      <img src="../common/images/failedLoad.png" alt="">
                      <em>暂无查询结果</em>
                    </template>
                </span>
                <span slot="no-results" class="contentEmpty">
                    <template v-if="actives.length">
                        (ฅ>ω<*ฅ)我们是有底线的(ฅ>ω<*ฅ)
                    </template>
                    <template v-if="!actives.length">
                      <img src="../common/images/failedLoad.png" alt="">
                      <em>暂无查询结果</em>
                    </template>
                </span>
            </infinite-loading>
          </div>
        </div>
    </div>
</template>

<script>
import headerSearch from '../public/header-search.vue';
import rearchKey from '../public/rearchKey';
import InfiniteLoading from 'vue-infinite-loading';

    export default {
        data() {
            return {
                // path:'http://fc.x.e000.com',
                page:0,
                num:10,
                search_intop: '',      //遮罩层样式
                searche: '',            //输入内容
                searchISshow: false,  
                clearShow: false,     //清除内容
                // items: [],
                activesText: '',
                actives:[],
                ptype:0,
            }
        },
        components: {
            headerSearch,
            rearchKey,
            InfiniteLoading
        },
        watch: {
            searche(value) {
                if(value != '') {
                  this.clearShow = true;
                  this.search_intop = 'background-color: transparent; z-index: 0;';
                }else {
                  this.clearShow = false;
                  this.search_intop = 'background-color: rgba(0, 0, 0, 0.5);';
                }
            }
        },
        mounted() {
          //获取所有的活动信息
          this.getAllProductList();
        },
        methods: {
          // 获取 监听子组件input值的动向值
          spot(data) {
            this.searche = data;
            this.ptype = 1;
            this.onInfinite();
          },
          onInfinite() {
              let that = this;
                setTimeout(() => {       
                    const temp = []; 
                    let keyword = this.searche;
                    if(!keyword) keyword = 0;
                    let page = '';
                    if(that.ptype == 1){
                        this.actives = [];
                        page = 0;
                    }else{
                        if(that.page == 0){
                            page = 1;
                        }else{
                            page = that.page;
                        }
                        
                    }
                    that.$fetch(that.$path+'/index.php/getAllActivityList', {page, keyword})
                      .then((res) => {
                        console.log('首页',res);
                      if(res.code == 200){
                        let array = res.data;
                        page++;
                        that.page = page;
                        // array.forEach(element => {
                        //   temp.push(element);
                        // });
                        // that.actives = that.actives.concat(temp);  
                        // console.log('最后的结果',that.actives);
                        // if(that.num > array.length){
                        //   this.$refs.infiniteLoading.$emit('$InfiniteLoading:complete');
                        //   return;
                        // }

                        if(array == '') {
                          that.actives = [];
                        }else {
                          array.forEach(element => {
                            temp.push(element);
                          });
                          that.actives = that.actives.concat(temp);  
                          console.log('最后的结果',that.actives);
                          if(that.num > array.length){
                            this.$refs.infiniteLoading.$emit('$InfiniteLoading:complete');
                            return;
                          }
                        }

                          // this.$refs.infiniteLoading.$emit('$InfiniteLoading:loaded');
                          this.$refs.infiniteLoading.$emit('$InfiniteLoading:complete');
                      }else {
                          this.$refs.infiniteLoading.$emit('$InfiniteLoading:complete');
                          return;
                      }
                      that.ptype = 0; 
                  });  
                }, 1000);
          },
          //获取所有的活动信息
          getAllProductList(){
            let that = this;
            let keyword = this.searche;
            if(!keyword) keyword = 0;
            let page = that.page;
            that.$fetch(that.$path+'/index.php/getAllActivityList', {page,keyword})
                .then((res) => {
                  console.log('首页',res);
                if(res.code == 200){

                  that.actives = res.data
                  // that.actives = res.data.a_list;
                  // that.infos = res.data.n_list;
                } 
            });
          },
          //点击活动详情
          activitydetailClick(val) {
              this.$router.push({ path: '/activityDetail', query: {id: val}});
          },
          // 点击搜索图标出现搜索框
          gotobtn() {
            this.searchISshow = true;
          },
          // 点击取消隐藏搜索框
          searchCancel(data) {
            this.searchISshow = false;
            data = '';
          },
          // 清除内容
          clearClick(data) {
            // this.clearShow = false;
            data = '';
          },
        },
        computed: {
            //过滤方法
          // actives: function() {
          //   let that = this;
          //     var _search = that.searche;
          //     console.log()
          //     if (_search) {
          //         //不区分大小写处理
          //         var reg = new RegExp(_search, 'ig')
          //         //es6 filter过滤匹配，有则返回当前，无则返回所有
          //         return that.items.filter(function(e) {
          //             //匹配所有字段
          //             return Object.keys(e).some(function(key) {
          //                 let data = e.title + e.price + e.apply_num + e.begin_time;
          //                 return data.match(reg);
          //             })
          //             //匹配某个字段
          //             //  return e.name.match(reg);
          //         })
          //     };
          //     return that.items;
          // }
        },  
      }
</script>

<style>
.main-activity {
    background-color: #fff;
}
.main-activity .active_item ul>li:first-child a {
    padding-top: 0.2rem;
}
</style>